import React from 'react'
import {Avatar, Modal, List, Collapse, Button, Icon, Form, Input, Select, DatePicker, Popconfirm} from 'antd';
import { connect } from 'dva';
import './Comment.scss';
import { noImg } from '../../../utils/request';
import {UrlConfig} from "../../../services/fetch";
const FormItem = Form.Item;
const Panel = Collapse.Panel;
const { Option } = Select;
const { RangePicker } = DatePicker;
@connect(({ comment }) => ({
    comment: comment
}))
@connect(({ video }) => ({
    video,
}))
@Form.create()
export default class CommentModal extends React.PureComponent {

    constructor(props) {
        super(props);

        this.state = {
            visible: this.props.visible,
            commentDetailList: []
        }
    }

    componentDidMount() {

    }


    comment_delete = (e, id, key) => {
        e.stopPropagation();
        this.props.dispatch({
            type: 'comment/deleteDetailComment',
            data: { comment_id: id, key: key }
        })
    }
    search = () => {
        const { dispatch, form } = this.props;
        // let sorter = this.state.sortInfo;
        const pagination = this.props.comment.commentPagination;

        form.validateFieldsAndScroll((err, values) => {
            let p = { ...pagination, information_id: pagination.information_id,
                index:1,
                page_size: 10,
                comment_id:'',
                comment_content: values.comment_content,
                start: values.time ? values.time[0] ? values.time[0].format('YYYY-MM-DD') + " 00:00:00" : '' : '',
                end: values.time ? values.time[1] ? values.time[1].format('YYYY-MM-DD') + " 23:59:59" : '' : '',
                status: values.status ? values.status : '',
                // sortField: sorter.field ? sorter.field : '',
                // sortOrder: sorter.order ? sorter.order : ''
            };
            this.props.dispatch({
                type: 'comment/commentList',
                payload: p
            })
        });
    }
    showModal = () => {

    }

    handleOk = () => {
        this.props.dispatch({
            type: 'comment/hideModal',
        });
        const { pagination } = this.props.comment;
        let p = { ...pagination}
        this.props.dispatch({
            type: 'comment/getAllComment',
            data: p
        })
    }


    callback = (item, key) => {
        this.props.dispatch({
            type: 'comment/commentDetail',
            payload: {
                key: key,
                comment_id: item.comment_id,
                index: 1,
                page_size: 10,
            }
        })
    }

    /**
     * 资讯详情
     */
    backName = (data) => {
        //处理关联组件
        switch (data) {
            case 'fcvideo':
                return '视频'
                break;
            case 'fcinformation':
                return '资讯'
                break;
            case 'fcinformation_theme':
                return '专题'
                break;
            case 'fcfind':
                return '发现'
                break;
            default:
                break;
        }
    }

    showMoreDital = (data) => {
        let info_img = data.thumbnail ? data.thumbnail : '';
        if (info_img){
            info_img = info_img.split(",")[0];
        }else{
            info_img = noImg;
        }
        if (data) {
            switch (data.type) {
                case 0:
                    if (data.module_name === 'fcvideo') {

                        return <div>
                            <h3>标题：{data.information_title}</h3>
                            <video src={this.props.video.videoInfo ? this.props.video.videoInfo.video_src : ''}
                                   controls="controls" width="100%">
                            </video>
                        </div>
                    }
                    if (data.module_name === 'fcinformation_theme') {

                        return <div>
                            <iframe width="100%" height="250px" src={UrlConfig + '/application/fcinformation/mobile/#/List/' + data.used_id + '/undefined?isZixunDetail=1'}></iframe>
                        </div>
                    }
                    return <div>
                        <h3>标题：{data.information_title}</h3>
                        <div className="showDitalDiv">
                            <img src={info_img} alt="..." width='100%' height='300px' />
                            {data.intro ? <p className="showDitalP" style={{ margin: 0 }}>{data.intro}</p> : ''}
                        </div>
                    </div>
                    break;
                case 1:
                    return <div>
                        <iframe width="100%" height="250px"  src={UrlConfig + '/application/fcinformation/mobile/#/ArticleDetail/' + data.information_id + '/undefined?isZixunDetail=1&isPreviewDetail=1'}></iframe>
                    </div>
                    break;
                case 2:
                    return <div style={{ height: '250px', overflowY: 'auto' }}>
                        <h3>标题：{data.information_title}</h3>
                        <div className="showDitalDiv">
                            {info_img ? <img src={info_img} alt="..." width='100%' height='300px' /> : ''}
                            {/* {data.intro ? <p className="showDitalP" style={{ margin: 0 }}>{data.intro}</p> : ''} */}
                        </div>
                        {
                            data.img_arr&&data.img_arr.map((item, index) => {
                                return (
                                    <div className="showDitalDiv" key={index}>
                                        {item.img_path ? <img src={item.img_path} alt="..." width='100%' height='300px' /> : ''}
                                        <div className="showDitalP">
                                            <h3>{item.img_title}</h3>
                                            {/* {item.img_intro ? <p>{item.img_intro}</p> : ''} */}
                                        </div>
                                    </div>
                                )
                            })
                        }

                    </div>
                    break;
                case 3:
                    return <div>
                        <div className="showDitalDiv">
                            <img src={info_img} alt="..." width='100%' height='300px' />
                            <div className="showDitalP">
                                <h3>{data.information_title}</h3>
                                {data.intro ? <p>{data.intro}</p> : ''}
                            </div>
                        </div>
                        <p style={{ fontSize: '15px', padding: '5px 14px', border: '1px solid #bfbfbf', borderRadius: '7px' }}>
                            关联：{data.url ? data.url : (this.backName(data.banner_module_name) + data.banner_used_title)}</p>
                    </div>
                    break;
                default:
                    break;
            }
        }
    }


    render() {
        const { getFieldDecorator } = this.props.form;

        const pagination = this.props.comment.commentPagination;
        const commentList = this.props.comment.commentList;
        let default_key = [];
        if (commentList[0] && commentList[0]['child']){
            default_key = ['0'];
        }
        const Header = ({ item, k }) => {

            let At = <Avatar className="comment_parent_pic" icon="user" />
            if (item && item.head_pic) {
                At = <Avatar className="comment_parent_pic" src={item.head_pic} />
            }

            let comment_status = <span className="t2 fr"  style={{ color: "#f44336"}}>拒审</span>;
            if(item.status === 0){
                comment_status = <span className="t2 fr" style={{ color: "#607d8b"}}>待审核</span>;
            }else if(item.status === 1){
                comment_status = <span className="t2 fr" style={{ color: "#4caf50"}}>审核通过</span>;
            }
            return (
                <div className="comment_parent" onClick={(e) => {
                    this.callback(item, k)
                }}>
                    <div className="comment_meta">
                        {At}
                        <div className="cc_content">
                            <h1 className="t1">
                            <span className="member_name">{item.member_nickname}</span>
                            {comment_status}
                            <span className="like_count" ><Icon type="like" /> {item.like_count}</span>
                            <span className="child_count" ><Icon type="message" /> {item.child_count}</span>
                            <span className="sensitive_words" >{item.sensitive_words}</span>
                            <span className="create_time" >{item.create_time}</span>

                            </h1>
                            <div className="t2" dangerouslySetInnerHTML={{ __html: item.filter_comment_content}}></div>
                        </div>
                    </div>
            <div className={'modal-action'}>


            <a  onClick={(e) => {
                e.stopPropagation();
                this.props.dispatch({
                    type: 'comment/checkFirstComment',
                    data: { comment_id: item.comment_id,status:1,key:k }
                })
            }}>审核通过</a>


            <a  onClick={(e) => {
                e.stopPropagation();
                this.props.dispatch({
                    type: 'comment/checkFirstComment',
                    data: { comment_id: item.comment_id,status:2,key:k }
                })
            }}>拒审</a>



            <Popconfirm placement="leftTop" title='确定删除？'  icon={null}
            onConfirm={(e)=>{
                e.stopPropagation();
                this.props.dispatch({
                    type: 'comment/deleteFirstComment',
                    data: { comment_id: item.comment_id, key: k,information_id:item.information_id }
                })
            }
            } onCancel={(e)=>{
                e.stopPropagation();
            }} okText="确定" cancelText="取消">

                <a href="javascript:;" onClick={(e) => {
                e.stopPropagation();
            }}>删除</a>

            </Popconfirm>




        </div>
                </div>
            )
        }

        return (

            <Modal
                title="评论列表"
                width={900}
                visible={this.props.comment.visibleModal}
                onOk={this.handleOk}
                onCancel={this.handleOk}
                footer={null}
            >

            <div style={{marginBottom:"12px",fontSize:"18px"}}>{this.props.comment.currentInformationData.information_title}
            (评论总数：<span>{this.props.comment.currentInformationData.comment_count}</span>）
            </div>
        {this.props.comment.visibleModal ? this.showMoreDital(this.props.comment.currentInformationData) : ''}
        <div>
        <Form layout="inline" onSubmit={this.handleSubmit}>
    <FormItem label='时间' >
            {getFieldDecorator('time')(
        <RangePicker style={{width:"200px"}}/>
    )}
    </FormItem>

        <FormItem label="评论内容">
            {getFieldDecorator('comment_content', {
            initialValue: ''
        })(
        <Input placeholder="输入内容" style={{width:"100px"}}/>
    )}
    </FormItem>
        <FormItem label='状态'>
            {getFieldDecorator('status')(
        <Select style={{width:"100px"}}>

    <Option value="0">待审核</Option>
            <Option value="1">审核通过</Option>
            <Option value="2">拒审</Option>
            </Select>
    )}
    </FormItem>

        <FormItem>
        <Button
        type="primary"
        style={{
            marginRight: '20px'
        }}
        onClick={this.search}
    >搜索</Button>
        <Button
        onClick={() => {
            this.props.form.resetFields();
            this.search()
        }}
    >清除</Button>
        </FormItem>

        </Form>
        </div>
            {this.props.comment.visibleModal ?
                <Collapse defaultActiveKey={default_key}>
                    {this.props.comment.commentList.map((item, key) => {

                        const child = item.child && item.child.data ? item.child.data : [];

                        return (
                            <Panel showArrow={false} header={<Header item={item} k={key} />} key={key}>
                                <List
                                    itemLayout="horizontal"
                                    dataSource={child}
                                    className="comment_detail_list"
                                    renderItem={item2 => {
                                        let At = <Avatar className="comment_parent_pic" icon="user" />
                                        if (item2 && item2.head_pic) {
                                            At = <Avatar className="comment_parent_pic" src={item2.head_pic} />
                                        }
                                        let comment_status = <span  id={"comment"+item2.comment_id} style={{ color: "#f44336"}}>拒审</span>;
                                        if(item2.status === 0){
                                            comment_status = <span  id={"comment"+item2.comment_id} style={{ color: "#607d8b"}}>待审核</span>;
                                            }else if(item2.status === 1){
                                            comment_status = <span id={"comment"+item2.comment_id}  style={{color: "#4caf50"}}>审核通过</span>;
                                        }
                                        let actionList = [];


                                            actionList.push(
                                                <a onClick={(e) => {
                                                e.stopPropagation();
                                                this.props.dispatch({
                                                    type: 'comment/checkDetailComment',
                                                    data: { comment_id: item2.comment_id, key: key,status:1 }
                                                })
                                            }}>审核通过</a>);
                                            actionList.push(
                                            <a onClick={(e) => {
                                                e.stopPropagation();
                                                this.props.dispatch({
                                                    type: 'comment/checkDetailComment',
                                                    data: { comment_id: item2.comment_id, key: key,status:2 }
                                                })
                                            }}>拒审</a>
                                            );



                                            actionList.push(
                                            <Popconfirm placement="leftTop" title='确定删除？'  icon={null}
                                            onConfirm={(e)=>{
                                                e.stopPropagation();
                                                this.props.dispatch({
                                                    type: 'comment/deleteDetailComment',
                                                    data: { comment_id: item2.comment_id, key: key,information_id:item2.information_id }
                                                })
                                            }
                                            } onCancel={(e)=>{
                                                e.stopPropagation();
                                            }} okText="确定" cancelText="取消">

                                                <a href="javascript:;" onClick={(e) => {
                                                e.stopPropagation();
                                            }}>删除</a>

                                                </Popconfirm>
                                              );

                                        return (
                                            <List.Item  actions={actionList}>
                                                <List.Item.Meta
                                                    avatar={At}
                                                    title={
                                                        <div className="t1">
                                                        <span className={'member_name'}>{item2.member_nickname}</span>
                                                        {comment_status}
                                                        <span className={'like_count'}><Icon type="like" /> {item2.like_count}</span>
                                                        <span className={'sensitive_words'}>{item2.sensitive_words}</span>
                                                        <span className={'create_time'}>{item2.create_time}</span>
                                                        </div>}
                                                    description={<div dangerouslySetInnerHTML={{ __html: item2.filter_comment_content}}></div>}
                                                />
                                            </List.Item>
                                        )


                                    }}
                                />
                                {child.length > 0 ?
                                    Math.ceil(item.child.pagination.total / item.child.pagination.page_size) == item.child.pagination.index ? '' :
                                        <div className="load_more"><Button onClick={() => {
                                            this.props.dispatch({
                                                type: 'comment/commentDetail',
                                                payload: {
                                                    key: key,
                                                    comment_id: item.comment_id,
                                                    index: item.child.pagination.index + 1,
                                                    page_size: item.child.pagination.page_size,
                                                }
                                            })
                                        }}>加载更多</Button></div> : ''}
                            </Panel>
                        )
                    })}
                </Collapse> : '' }
                {pagination.total <= pagination.page_size || Math.ceil(pagination.total / pagination.page_size) == pagination.index ? '' :
                    <div className="load_more"><Button onClick={() => {
                        let p = { ...pagination, information_id: pagination.information_id, index: pagination.index + 1, page_size: pagination.page_size };
                        this.props.dispatch({
                            type: 'comment/commentList',
                            payload: p
                        })
                    }}>加载更多</Button></div>}
            </Modal>
        )
    }
}
